HTML5如何解决margin-top的塌陷问题（附代码）

来源:网络整理作者: 发布时间:2020-12-22 10:09

这篇文章给大家介绍的内容是关于HTML5如何解决margin-top的塌陷问题（附代码），有一定的参考价值，有需要的朋友可...

相关推荐：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 400px; height: 400px; background-color: red; /* 解决margin-top塌陷问题 */ /* 1.设置border padding */ /* border: 1px solid green; */ /* padding: 1px; */ /* 2.设置overflow */ overflow: hidden; } /* 3.通过伪类实际开发使用 */ .clearfix:before{ content: ""; display: table; } .box1{ width: 100px; height: 100px; background-color: green; margin-top: 50px; } </style> </head> <body> <p class="box clearfix"> <p class="box1"></p> </p> </body> </html>

运行效果如下：

这篇文章给大家介绍的内容是关于HTML5如何解决margin-top的塌陷问题（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

2345截图20180809154600.png

HTML5属性：margin属性的用法实例

以上就是HTML5如何解决margin-top的塌陷问题（附代码）的详细内容，更多请关注聚合云库其它相关文章！

相关热词： HTML HTML5 解决

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/7078.shtml

上一篇：Html5中video标签的用法：如

下一篇：H5实现拖拽排序的代码

微软IE9平台预览版完整支持H	IE9正式版无论从性能提升还是
你可以根据自己的网站需求设	HTML5 学习总结（四）canvas绘图
canvas与html5实现视频截图成果	html5 canvas常用api总结(二)画图
/lili这里是列表内容/lili这里是	将这个文件给引入进去引入的
可以加我的HTML5前端交流群11	HTML5生拖放实例分析
解决layUI导出到Excel时身份证号	html如何提高页面的加载速度
如何在html页面中实现查找功能	HTML5 和 Flash 区别？
如何查看html文件的代码？	你有认真学习HTML5吗？那么你应